<template>
  <el-dialog :close-on-click-modal='false' :title="$t('设置')" v-if="dialogVisible" :visible.sync="dialogVisible" width="500px" v-drag append-to-body @close="close">
    <el-form ref="forms" :model="record" :rules="rules" tooltip-effect="dark" label-width="100px" style="margin:0 20px;">
      <el-form-item :label="$t('首页显示模块')" :label-width="lang === 'zh'?'100px':'140px'" prop="Ipv4Net">
        <draggable :list="record.rule_map" group="article" chosen-class="setDragChosen" drag-class='setDragDrag' ghost-class="setDragGhost" :animation='500' @sort='sortModule'>
          <div v-for="element in record.rule_map" :key="element.id" class="setListComplete">
            <div class="setHandle">
              {{ element.name }}
              <el-checkbox v-model="element.status" style="height: 30px;float:right;" @change="checkChange(element)"></el-checkbox>
            </div>
          </div>
        </draggable>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reDefaultSet()">{{$t('恢复默认设置')}}</el-button>
      <el-button @click="close()">{{$t('关 闭')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import { editHomeMenu, getHomeMenu, setHomeDefault } from '@/api/home'
import draggable from 'vuedraggable'
import Middle from '@/utils/middle.js'
export default {
  name: 'Set',
  components: { draggable },
  data () {
    return {
      dialogVisible: false,
      lang: this.$i18n.locale,
      record: {
        rule_map: [],
        roleID: getUserInfo().roleID
      },
      rules: {
      }
    }
  },
  methods: {
    init () {
      this.dialogVisible = true
      getHomeMenu({ roleID: this.record.roleID }).then(res => {
        if (res.status === 0) {
          this.record.rule_map = res.info
          this.record.rule_map.sort(this.compare('sort'))
          this.record.rule_map.forEach((item, index) => {
            if (item.status === 'display') {
              item.status = true
            } else {
              item.status = false
            }
          })
        }
      })
    },
    submit () {
      this.record.rule_map.forEach((item, index) => {
        item.sort = index + 1
        if (item.status === true) {
          item.status = 1
        } else {
          item.status = 0
        }
      })
      let formData = JSON.parse(JSON.stringify(this.record))
      formData.rule_map = JSON.stringify(formData.rule_map)
      this.$refs.forms.validate((valid) => {
        if (valid) {
          editHomeMenu(formData).then(res => {
            if (res.status === 0) {
              this.$messages.success(this.$t('设置成功'))
              Middle.$emit('getInfoRefresh')
              this.close()
            }
          })
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.$parent.dialogVisible = false
      this.record.rule_map = []
      this.$refs.forms.resetFields()
    },
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    sortModule (e) {
      let info = this.record.rule_map[e.newIndex]
      let formData = {
        id: info.id,
        status: info.status ? 'display' : 'hide',
        sort: e.newIndex + 1
      }
      editHomeMenu(formData).then(res => {
        if (res.status === 0) {
          this.$messages.success('设置成功')
          Middle.$emit('getInfoRefresh')
        }
      }).catch(e => {
        this.init()
      })
    },
    checkChange (e) {
      let formData = JSON.parse(JSON.stringify(e))
      formData.status = formData.status ? 'display' : 'hide'
      editHomeMenu(formData).then(res => {
        if (res.status === 0) {
          this.$messages.success('设置成功')
          Middle.$emit('getInfoRefresh')
        }
      }).catch(e => {
        this.init()
      })
    },
    reDefaultSet () {
      setHomeDefault().then(res => {
        this.$messages.success('设置成功')
        this.init()
        Middle.$emit('getInfoRefresh')
      })
    }
  }
}
</script>
<style lang="less">
.setListComplete:hover {
  cursor: s-resize !important;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.setDragChosen {
  cursor: s-resize !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.setDragGhost {
  cursor: s-resize !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.setDragDrag {
  cursor: s-resize !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.setListComplete {
  border: 1px solid #ebeef5;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
}
.setHandle {
  height: 30px;
  padding: 0 10px;
}
</style>
